@charset "utf-8";
@import "comm/reset";
@function p($px){
    @return $px/2+px;
}
.menu{
    position: fixed;
    bottom: p(67);
    z-index: 1;
    width: 100%;
    li{
        width: p(171);
        height: p(70);
        margin: 0 auto;
        list-style: none;
        a{
            img{
                width: 100%;
            }
        }
    }
}
.indexWeb{
   .home{
       background: url(../img/hbg.png)no-repeat;
       background-size: cover;
       overflow: hidden;
       position: relative;
       z-index: -2;
       .logo{
           width: p(103);
           height: p(38);
           margin-top: p(44);
           margin-left: p(44);
           img{
               width: 100%;
           }
        }
        .title{
            margin-top: p(79);
            display: flex;
            justify-content: center;
            img{
                width: p(576);
                height: p(306);
            }
        }
        .yun{
            position: absolute;
            top: 30%;
            right: -100%;
            width: p(77);
            height: p(56);
            z-index: -1;
            animation-name: yundong;
            animation-duration: 20s;
            animation-iteration-count: infinite;
            img{
                width: 100%;
            }
        }
        .yun2{
            position: absolute;
            top: 35%;
            right: -100%;
            width: p(77);
            height: p(56);
            z-index: -1;
            animation-name: yundong2;
            animation-duration: 27s;
            animation-delay: 800ms;
            animation-iteration-count: infinite;
            img{
                width: 100%;
            }
        }
        .yun3{
            position: absolute;
            top: 40%;
            right: -100%;
            width: p(77);
            height: p(56);
            z-index: -1;
            animation-name: yundong3;
            animation-duration: 23s;
            animation-delay: 500ms;
            animation-iteration-count: infinite;
            img{
                width: 100%;
            }
        }
        .people{
            position: absolute;
            bottom: p(151);
            left: 50%;
            transform: translateX(-50%) translateY(-100%);
            opacity: 0;
            animation-name: peopledown;
            animation-duration: 3s;
            animation-delay: 2s;
            animation-fill-mode: forwards;
            z-index: 2;
            img{
                width: p(339);
                height: p(421);
            }
        }
        .moom{
            position: absolute;
            left: 75%;
            top: 47%;
            animation-delay: 4s;
            img{
                width: p(75);
                height: p(75);
                border-radius: 50%;
                box-shadow: (p(0) p(0) p(50) p(20) #5ec9d7);
            }
        }
        .tag{
            position: absolute;
            left: 70%;
            top: 57%;
            animation-delay: 3.1s;
            img{
                width: p(148);
                height: p(82);
            }
        }
        .tag2{
            position: absolute;
            left: 8%;
            top: 55%;
            animation-delay: 3.2s;
            img{
                width: p(94);
                height: p(69);
            }
        }
        .tag3{
            position: absolute;
            left: 8%;
            top: 75%;
            animation-delay: 3.2s;
            img{
                width: p(128);
                height: p(78);
            }
        }
        .tag4{
            position: absolute;
            left: 77%;
            top: 77%;
            animation-delay: 3.2s;
            img{
                width: p(94);
                height: p(57);
            }
        }
    }
    
}
@keyframes yundong{
    0%{
        right: -10%;
         opacity: 1;
    }
    80%{
        right: 100%;
        opacity: 0;
    }
    100%{
        opacity: 0;
        right: -10%;
    }
}
@keyframes yundong2{
    0%{
        right: -10%;
         opacity: 0.5;
    }
    80%{
        right: 100%;
        opacity: 0;
    }
    100%{
        opacity: 0;
        right: -10%;
    }
}
@keyframes yundong3{
    0%{
        right: -10%;
        opacity: 0.5;
    }
    80%{
        right: 100%;
        opacity: 0;
    }
    100%{
        opacity: 0;
        right: -10%;
    }
}
//人物下降
@keyframes peopledown{
    0%{
        transform:translateX(-50%) translateY(-100%);
        opacity: 0;
    }
    80%{
        transform:translateX(-50%) translateY(10%);
        opacity: 1;
    }
    100%{
        transform:translateX(-50%) translateY(0%);
        opacity: 1;
    }
}



@media only screen and (min-width:375px){
    .indexWeb{
        .home{
            .logo{
                width: p(120);
            }
            .title{
                img{
                    width: p(600);
                }
            }
            .yun{
                width: p(88);
            }
            .yun2{
                width: p(88);
            }
            .yun3{
                width: p(88);
            }
            .people{
                img{
                    width: p(430);
                    height: p(600);
                }
            }
            .moom{
                width: p(75);
            }
            .tag{
                img{
                    width: p(188);
                    height: p(142);
                }
            }
            .tag2{
                img{
                    width: p(128);
                    height: p(120);
                }
            }
            .tag3{
                position: absolute;
                left: 8%;
                top: 75%;
                img{
                    width: p(128);
                    height: p(120);
                }
            }
            .tag4{
                position: absolute;
                left: 77%;
                top: 77%;
                img{
                    width: p(128);
                    height: p(120);
                }
            }
        }
    }
}
@media only screen and (min-width:414px){
    .indexWeb{
        .home{
            .logo{
                width: p(150);
            }
            .title{
                img{
                    width: p(630);
                }
            }
            .yun{
                width: p(99);
            }
            .yun2{
                width: p(99);
            }
            .yun3{
                width: p(99);
            }
            .people{
                img{
                    width: p(500);
                    height: p(650);
                }
            }
            .moom{
                width: p(85);
            }
            .tag{
                img{
                    width: p(188);
                    height: p(142);
                }
            }
        }
    }
}
.fp-controlArrow{
    display: none !important;
}